<template>
    <el-icon :size="30" color="#409EFC">
        <i-ep-Expand v-if="store.getters.getCollapsed" @click="handleCollapse"/>
        <i-ep-Fold @click="handleCollapse" v-else/>
    </el-icon>
</template>
<script setup>
import { useStore } from 'vuex'
const store = useStore()
const handleCollapse = () => {
    store.commit('changeCollapse',!store.getters.getCollapsed)
    // 修改css变量的值 $sideBarWidth
    const width = store.getters.getCollapsed ? '0px' : '210px'
    document.getElementsByTagName('body')[0].style.setProperty('--width', width);
}
</script>